@extends('layouts.default')

@section('title')
	设备发放<i class="fa-li fa fa-spinner fa-spin"></i>
@stop

@section('pre')
	<li class="active"><span>@yield('title')</span></li>
@stop

@section('css')

<style type="text/css">
	.phone-group{
		height:30px;
	}
	.select2-hidden-accessible
	{
		display: none;
	}
</style>

@stop

@section('content')

<div class="row">
	<div class="col-lg-12">
		<div class="main-box">
			<header class="main-box-header clearfix">
			<h2>设备发放</h2>
			</header>
			<div class="main-box-body clearfix">
				<form role="form" class="form-horizontal" method="post" action="{{ url('deviceBind') }}">
					<div class="form-group col-lg-12  phone-group" id="phone">
						<label for="exampleInputFile" class="col-lg-1 control-label">手机号</label>
						<div class="col-lg-4">
							<input class="form-control" name="phone" type="text" placeholder="请输入手机号">
						</div>
						<button type="button" class="md-trigger btn btn-primary mrg-b-lg"  id="add-phone" data-toggle="tooltip" data-placement="bottom" title="添加一个手机号">
						<span class="glyphicon glyphicon-plus"></span>
						</button>
					</div>

					<div class="form-group col-lg-12">
						<label for="group-select" class="col-lg-1 control-label">小区选择</label>

	                    <div class="btn-group col-lg-8" data-toggle="buttons" id="group-select" name="group-select">
	                        <label class="btn btn-primary btn-xs" id="create-group">
	                            <input type="radio" name="group-n" value="0"> 新建小区
	                        </label>
	                        @if( isset($groupData) && !empty($groupData) )
		                        @foreach ($groupData as $key => $name)
		                            <label class="btn btn-primary btn-xs">
		                                <input type="radio" name="group-n" id="{{ $key }}" value="{{ $key }}"> {{ $name }}
		                            </label>
		                        @endforeach
		                    @endif
	                    </div>
	                </div>

					<div class="form-group col-lg-12 hidden" id="group-name">
						<label for="name" class="col-lg-1 control-label">小区名称</label>
						<div class="col-lg-2">
							<input class="form-control" id="name" type="text" name="name" placeholder="请输入小区名称">
						</div>
					</div>

					<div class="form-group col-lg-12 hidden" id="loctown">
						<label for="exampleInputFile" class="col-lg-1 control-label">县区</label>
						<div class="col-lg-4">
							<div class="form-group-select2">
								<select id="loc_town" name="location" style="width:120px">
								</select>
							</div>
						</div>
					</div>

					<div class="form-group col-lg-12">

						<label for="" class="col-lg-1 control-label"></label>
						<div class="col-lg-1">
							<input class="form-control" id="address1" name="address1" type="text">
						</div>
						<label for="address1" class="col-lg-1 control-label" style="text-align: left">栋</label>
						<div class="col-lg-1">
							<input class="form-control" id="address2" name="address2" type="text">
						</div>
						<label for="address2" class="col-lg-1 control-label" style="text-align: left">单元</label>
						<div class="col-lg-1">
							<input class="form-control" id="address3" name="address3" type="text">
						</div>
						<label for="address3" class="col-lg-1 control-label" style="text-align: left">室</label>
					
					</div>
					<div class="form-group col-lg-12">
						<label for="hardware_serial" class="col-lg-1 control-label">序列号</label>
						<div class="col-lg-6">
							<input class="form-control" id="hardware_serial" name="hardware_serial" value="{{ isset($code)?$code:'' }}" type="text" placeholder="请输入硬件序列号">
						</div>
					</div>
					<div class="col-lg-12" style="text-align: center;">
						<br/>
						<input type="submit" name="bind" class="btn btn-primary" value="发放">
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

@stop

@section('js')

<script type="text/javascript">

	jQuery(document).ready(function($) {
		
		$select = $('#sel2');
		$select.select2();

		$('#exampleTooltip').tooltip();

		//添加手机号
		$('#add-phone').unbind('click').on('click', function(){

			var count = $('.phone-group').length;
			var phoneOrder;

			if( count <= 1 )
			{
				phoneOrder = $("#phone");
			}
			else
			{
				phoneOrder = $("#phone"+(count-1));
			}

			phoneOrder.after(
				'<div class="form-group col-lg-12  phone-group" id="phone'+count+'"><label for="exampleInputFile" class="col-lg-1 control-label"></label><div class="col-lg-4"><input class="form-control" name="phone'+count+'" type="text" placeholder="请输入第'+(count+1)+'个手机号"></div><button type="button" class="md-trigger btn btn-danger mrg-b-lg remove-phone" data-toggle="tooltip" data-placement="bottom" title="删除一个手机号"><span class="glyphicon glyphicon-minus"></span></button></div>'
			);

		});

		//删除手机号
		setInterval(function(){


			$(".remove-phone").unbind('click').on('click', function(){

				$(this).parent().remove();

			});

		},500);

		//新建小区
		$('#group-select').find('label').on('click', function(){

			if($(this).attr('id') == 'create-group')
			{
				$('#group-name').fadeIn().removeClass('hidden');
				$('#loctown').fadeIn().removeClass('hidden');
			}
			else
			{
				$('#group-name').fadeOut().addClass('hidden');
				$('#loctown').fadeOut().addClass('hidden');
			}

		})

	});

</script>

@stop